{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--BOOK_INFORMATION-->\n",
    "<a href=\"https://user-images.githubusercontent.com/19553554/71825144-2d568180-30d6-11ea-8ee0-63c849cfd934.png\" target=\"_blank\"><img align=\"left\" style=\"width: 76px; height: 100px; background: white; padding: 1px; border: 1px solid black; margin-right:10px;\"></a>\n",
    "*pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，为了与 Python 进行对接，方便在 Python 中直接使用数据生成图，于是有人开发出了这个项目[GitHub](https://github.com/pyecharts/pyecharts) .*\n",
    "\n",
    "*Note.建议本程序在参看https://github.com/pyecharts/pyecharts 的安装步骤后再运行； 本程序所有的例子都是从官方提供的样例代码[GitHub](https://github.com/pyecharts/pyecharts-gallery)中提取的,如果对某个API有疑问建议在IDE里面查看*\n",
    "\n",
    "*Echart类型图种大全:https://echarts.apache.org/examples/zh/#chart-type-line pyecharts图导入到ppt中的方法:https://baijiahao.baidu.com/s?id=1663839456876951842&wfr=spider&for=pc.*\n",
    "\n",
    "*作者: LBQ; 时间:2020/7/24. 邮箱:779660843@qq.com*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# XIII.图像组件"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "主要就是在图形中添加外部的图像组件，可以自定义设置"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 基础示例 "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"f81015b307034d3a9d02b128d50236ac\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_f81015b307034d3a9d02b128d50236ac = echarts.init(\n",
       "                    document.getElementById('f81015b307034d3a9d02b128d50236ac'), 'white', {renderer: 'canvas'});\n",
       "                var option_f81015b307034d3a9d02b128d50236ac = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                88,\n",
       "                122,\n",
       "                98,\n",
       "                52,\n",
       "                115,\n",
       "                30,\n",
       "                33\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                44,\n",
       "                76,\n",
       "                22,\n",
       "                39,\n",
       "                44,\n",
       "                107,\n",
       "                26\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u6bdb\\u8863\",\n",
       "                \"\\u9886\\u5e26\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u98ce\\u8863\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Bar-Graphic Image \\u7ec4\\u4ef6\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"graphic\": [\n",
       "        {\n",
       "            \"type\": \"image\",\n",
       "            \"id\": \"logo\",\n",
       "            \"$action\": \"merge\",\n",
       "            \"rotation\": 0,\n",
       "            \"origin\": [\n",
       "                75,\n",
       "                75\n",
       "            ],\n",
       "            \"right\": 20,\n",
       "            \"top\": 20,\n",
       "            \"bounding\": \"raw\",\n",
       "            \"z\": -10,\n",
       "            \"zlevel\": 0,\n",
       "            \"silent\": false,\n",
       "            \"invisible\": false,\n",
       "            \"ignore\": false,\n",
       "            \"cursor\": \"pointer\",\n",
       "            \"draggable\": false,\n",
       "            \"progressive\": false,\n",
       "            \"width\": 0,\n",
       "            \"height\": 0,\n",
       "            \"style\": {\n",
       "                \"image\": \"https://www.echartsjs.com/zh/images/favicon.png\",\n",
       "                \"x\": 0,\n",
       "                \"y\": 0,\n",
       "                \"width\": 150,\n",
       "                \"height\": 150,\n",
       "                \"opacity\": 0.4\n",
       "            }\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_f81015b307034d3a9d02b128d50236ac.setOption(option_f81015b307034d3a9d02b128d50236ac);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f14003eda58>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "bgi = (\n",
    "    Bar()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(title=\"Bar-Graphic Image 组件示例\"),\n",
    "        graphic_opts=[\n",
    "            opts.GraphicImage(\n",
    "                graphic_item=opts.GraphicItem(\n",
    "                    id_=\"logo\", right=20, top=20, z=-10, bounding=\"raw\", origin=[75, 75]\n",
    "                ),\n",
    "                graphic_imagestyle_opts=opts.GraphicImageStyleOpts(###图形学组件\n",
    "                    image=\"https://www.echartsjs.com/zh/images/favicon.png\",\n",
    "                    width=150,\n",
    "                    height=150,\n",
    "                    opacity=0.4,\n",
    "                ),\n",
    "            )\n",
    "        ],\n",
    "    )\n",
    "    #.render(\"graphic_image.html\")\n",
    ")\n",
    "bgi.load_javascript()\n",
    "bgi.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"9f49a0bced08461bb1ee74f7739f6942\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_9f49a0bced08461bb1ee74f7739f6942 = echarts.init(\n",
       "                    document.getElementById('9f49a0bced08461bb1ee74f7739f6942'), 'white', {renderer: 'canvas'});\n",
       "                    \n",
       "        var rotation = 0;\n",
       "        setInterval(function () {\n",
       "            chart_1234.setOption({\n",
       "                graphic: {\n",
       "                    id: 'logo',\n",
       "                    rotation: (rotation += Math.PI / 360) % (Math.PI * 2)\n",
       "                }\n",
       "            });\n",
       "        }, 30);\n",
       "    \n",
       "                var option_9f49a0bced08461bb1ee74f7739f6942 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                137,\n",
       "                104,\n",
       "                48,\n",
       "                106,\n",
       "                30,\n",
       "                101,\n",
       "                118\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                140,\n",
       "                61,\n",
       "                121,\n",
       "                88,\n",
       "                87,\n",
       "                47,\n",
       "                33\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u53ef\\u4e50\",\n",
       "                \"\\u96ea\\u78a7\",\n",
       "                \"\\u6a59\\u6c41\",\n",
       "                \"\\u7eff\\u8336\",\n",
       "                \"\\u5976\\u8336\",\n",
       "                \"\\u767e\\u5a01\",\n",
       "                \"\\u9752\\u5c9b\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Bar-Graphic Image\\uff08\\u65cb\\u8f6c\\u529f\\u80fd\\uff09\\u7ec4\\u4ef6\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"graphic\": [\n",
       "        {\n",
       "            \"type\": \"image\",\n",
       "            \"id\": \"logo\",\n",
       "            \"$action\": \"merge\",\n",
       "            \"rotation\": 0,\n",
       "            \"origin\": [\n",
       "                75,\n",
       "                75\n",
       "            ],\n",
       "            \"right\": 20,\n",
       "            \"top\": 20,\n",
       "            \"bounding\": \"raw\",\n",
       "            \"z\": -10,\n",
       "            \"zlevel\": 0,\n",
       "            \"silent\": false,\n",
       "            \"invisible\": false,\n",
       "            \"ignore\": false,\n",
       "            \"cursor\": \"pointer\",\n",
       "            \"draggable\": false,\n",
       "            \"progressive\": false,\n",
       "            \"width\": 0,\n",
       "            \"height\": 0,\n",
       "            \"style\": {\n",
       "                \"image\": \"https://www.echartsjs.com/zh/images/favicon.png\",\n",
       "                \"x\": 0,\n",
       "                \"y\": 0,\n",
       "                \"width\": 150,\n",
       "                \"height\": 150,\n",
       "                \"opacity\": 0.4\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"5%\",\n",
       "            \"right\": \"4%\",\n",
       "            \"bottom\": \"5%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_9f49a0bced08461bb1ee74f7739f6942.setOption(option_9f49a0bced08461bb1ee74f7739f6942);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f14003ede80>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "bar = (\n",
    "    Bar(init_opts=opts.InitOpts(chart_id=\"1234\"))\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(title=\"Bar-Graphic Image（旋转功能）组件示例\"),\n",
    "        graphic_opts=[\n",
    "            opts.GraphicImage(\n",
    "                graphic_item=opts.GraphicItem(\n",
    "                    id_=\"logo\", right=20, top=20, z=-10, bounding=\"raw\", origin=[75, 75]\n",
    "                ),\n",
    "                graphic_imagestyle_opts=opts.GraphicImageStyleOpts(\n",
    "                    image=\"https://www.echartsjs.com/zh/images/favicon.png\",\n",
    "                    width=150,\n",
    "                    height=150,\n",
    "                    opacity=0.4,\n",
    "                ),\n",
    "            )\n",
    "        ],\n",
    "    )\n",
    ")\n",
    "c = (\n",
    "    Grid(init_opts=opts.InitOpts(chart_id=\"1234\"))\n",
    "    .add(\n",
    "        chart=bar,\n",
    "        grid_opts=opts.GridOpts(pos_left=\"5%\", pos_right=\"4%\", pos_bottom=\"5%\"),\n",
    "    )\n",
    "    .add_js_funcs(\n",
    "        \"\"\"\n",
    "        var rotation = 0;\n",
    "        setInterval(function () {\n",
    "            chart_1234.setOption({\n",
    "                graphic: {\n",
    "                    id: 'logo',\n",
    "                    rotation: (rotation += Math.PI / 360) % (Math.PI * 2)\n",
    "                }\n",
    "            });\n",
    "        }, 30);\n",
    "    \"\"\"\n",
    "    )\n",
    "    #.render(\"graphic_image_with_js.html\")\n",
    ")\n",
    "c.load_javascript()\n",
    "c.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"a7f044f96e474c0a830e39276bae45da\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_a7f044f96e474c0a830e39276bae45da = echarts.init(\n",
       "                    document.getElementById('a7f044f96e474c0a830e39276bae45da'), 'white', {renderer: 'canvas'});\n",
       "                var option_a7f044f96e474c0a830e39276bae45da = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                54,\n",
       "                127,\n",
       "                66,\n",
       "                97,\n",
       "                132,\n",
       "                146,\n",
       "                68\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                113,\n",
       "                136,\n",
       "                108,\n",
       "                45,\n",
       "                147,\n",
       "                70,\n",
       "                109\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u54c8\\u58eb\\u5947\",\n",
       "                \"\\u8428\\u6469\\u8036\",\n",
       "                \"\\u6cf0\\u8fea\",\n",
       "                \"\\u91d1\\u6bdb\",\n",
       "                \"\\u7267\\u7f8a\\u72ac\",\n",
       "                \"\\u5409\\u5a03\\u5a03\",\n",
       "                \"\\u67ef\\u57fa\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Bar-Graphic Rect+Text 1 \\u7ec4\\u4ef6\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"graphic\": [\n",
       "        {\n",
       "            \"type\": \"group\",\n",
       "            \"diffChildrenByName\": false,\n",
       "            \"children\": [\n",
       "                {\n",
       "                    \"type\": \"rect\",\n",
       "                    \"$action\": \"merge\",\n",
       "                    \"rotation\": 0,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"center\",\n",
       "                    \"bounding\": \"all\",\n",
       "                    \"z\": 100,\n",
       "                    \"zlevel\": 0,\n",
       "                    \"silent\": false,\n",
       "                    \"invisible\": false,\n",
       "                    \"ignore\": false,\n",
       "                    \"cursor\": \"pointer\",\n",
       "                    \"draggable\": false,\n",
       "                    \"progressive\": false,\n",
       "                    \"width\": 0,\n",
       "                    \"height\": 0,\n",
       "                    \"shape\": {\n",
       "                        \"x\": 0,\n",
       "                        \"y\": 0,\n",
       "                        \"width\": 400,\n",
       "                        \"height\": 50\n",
       "                    },\n",
       "                    \"style\": {\n",
       "                        \"fill\": \"rgba(0,0,0,0.3)\",\n",
       "                        \"line_width\": 0\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"text\",\n",
       "                    \"$action\": \"merge\",\n",
       "                    \"rotation\": 0,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"center\",\n",
       "                    \"bounding\": \"all\",\n",
       "                    \"z\": 100,\n",
       "                    \"zlevel\": 0,\n",
       "                    \"silent\": false,\n",
       "                    \"invisible\": false,\n",
       "                    \"ignore\": false,\n",
       "                    \"cursor\": \"pointer\",\n",
       "                    \"draggable\": false,\n",
       "                    \"progressive\": false,\n",
       "                    \"width\": 0,\n",
       "                    \"height\": 0,\n",
       "                    \"style\": {\n",
       "                        \"text\": \"pyecharts bar chart\",\n",
       "                        \"x\": 0,\n",
       "                        \"y\": 0,\n",
       "                        \"font\": \"bold 26px Microsoft YaHei\",\n",
       "                        \"textAlign\": \"left\",\n",
       "                        \"fill\": \"#fff\",\n",
       "                        \"line_width\": 0\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"$action\": \"merge\",\n",
       "            \"rotation\": Math.PI / 4,\n",
       "            \"right\": 110,\n",
       "            \"bottom\": 110,\n",
       "            \"bounding\": \"raw\",\n",
       "            \"z\": 100,\n",
       "            \"zlevel\": 0,\n",
       "            \"silent\": false,\n",
       "            \"invisible\": false,\n",
       "            \"ignore\": false,\n",
       "            \"cursor\": \"pointer\",\n",
       "            \"draggable\": false,\n",
       "            \"progressive\": false,\n",
       "            \"width\": 0,\n",
       "            \"height\": 0\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_a7f044f96e474c0a830e39276bae45da.setOption(option_a7f044f96e474c0a830e39276bae45da);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f14000cd940>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from pyecharts.commons.utils import JsCode\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "\n",
    "c = (\n",
    "    Bar()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(title=\"Bar-Graphic Rect+Text 1 组件示例\"),\n",
    "        graphic_opts=[\n",
    "            opts.GraphicGroup(\n",
    "                graphic_item=opts.GraphicItem(\n",
    "                    rotation=JsCode(\"Math.PI / 4\"),\n",
    "                    bounding=\"raw\",\n",
    "                    right=110,\n",
    "                    bottom=110,\n",
    "                    z=100,\n",
    "                ),\n",
    "                children=[\n",
    "                    opts.GraphicRect(\n",
    "                        graphic_item=opts.GraphicItem(\n",
    "                            left=\"center\", top=\"center\", z=100\n",
    "                        ),\n",
    "                        graphic_shape_opts=opts.GraphicShapeOpts(width=400, height=50),\n",
    "                        graphic_basicstyle_opts=opts.GraphicBasicStyleOpts(\n",
    "                            fill=\"rgba(0,0,0,0.3)\"\n",
    "                        ),\n",
    "                    ),\n",
    "                    opts.GraphicText(\n",
    "                        graphic_item=opts.GraphicItem(\n",
    "                            left=\"center\", top=\"center\", z=100\n",
    "                        ),\n",
    "                        graphic_textstyle_opts=opts.GraphicTextStyleOpts(\n",
    "                            text=\"pyecharts bar chart\",\n",
    "                            font=\"bold 26px Microsoft YaHei\",\n",
    "                            graphic_basicstyle_opts=opts.GraphicBasicStyleOpts(\n",
    "                                fill=\"#fff\"\n",
    "                            ),\n",
    "                        ),\n",
    "                    ),\n",
    "                ],\n",
    "            )\n",
    "        ],\n",
    "    )\n",
    "    #.render(\"graphic_rect_bar0.html\")\n",
    ")\n",
    "c.load_javascript()\n",
    "c.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"f94407a68c754620af3a4e3f3fc21126\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_f94407a68c754620af3a4e3f3fc21126 = echarts.init(\n",
       "                    document.getElementById('f94407a68c754620af3a4e3f3fc21126'), 'white', {renderer: 'canvas'});\n",
       "                var option_f94407a68c754620af3a4e3f3fc21126 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                79,\n",
       "                59,\n",
       "                31,\n",
       "                145,\n",
       "                112,\n",
       "                140,\n",
       "                97\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                23,\n",
       "                109,\n",
       "                64,\n",
       "                98,\n",
       "                62,\n",
       "                47,\n",
       "                29\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u6bdb\\u8863\",\n",
       "                \"\\u9886\\u5e26\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u98ce\\u8863\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Bar-Graphic Rect+Text 2 \\u7ec4\\u4ef6\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"graphic\": [\n",
       "        {\n",
       "            \"type\": \"group\",\n",
       "            \"diffChildrenByName\": false,\n",
       "            \"children\": [\n",
       "                {\n",
       "                    \"type\": \"rect\",\n",
       "                    \"$action\": \"merge\",\n",
       "                    \"rotation\": 0,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"middle\",\n",
       "                    \"bounding\": \"all\",\n",
       "                    \"z\": 100,\n",
       "                    \"zlevel\": 0,\n",
       "                    \"silent\": false,\n",
       "                    \"invisible\": false,\n",
       "                    \"ignore\": false,\n",
       "                    \"cursor\": \"pointer\",\n",
       "                    \"draggable\": false,\n",
       "                    \"progressive\": false,\n",
       "                    \"width\": 0,\n",
       "                    \"height\": 0,\n",
       "                    \"shape\": {\n",
       "                        \"x\": 0,\n",
       "                        \"y\": 0,\n",
       "                        \"width\": 190,\n",
       "                        \"height\": 90\n",
       "                    },\n",
       "                    \"style\": {\n",
       "                        \"fill\": \"#fff\",\n",
       "                        \"stroke\": \"#555\",\n",
       "                        \"line_width\": 2,\n",
       "                        \"shadowBlur\": 8,\n",
       "                        \"shadowOffsetX\": 3,\n",
       "                        \"shadowOffsetY\": 3,\n",
       "                        \"shadowColor\": \"rgba(0,0,0,0.3)\"\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"text\",\n",
       "                    \"$action\": \"merge\",\n",
       "                    \"rotation\": 0,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"middle\",\n",
       "                    \"bounding\": \"all\",\n",
       "                    \"z\": 100,\n",
       "                    \"zlevel\": 0,\n",
       "                    \"silent\": false,\n",
       "                    \"invisible\": false,\n",
       "                    \"ignore\": false,\n",
       "                    \"cursor\": \"pointer\",\n",
       "                    \"draggable\": false,\n",
       "                    \"progressive\": false,\n",
       "                    \"width\": 0,\n",
       "                    \"height\": 0,\n",
       "                    \"style\": {\n",
       "                        \"text\": ['\\u6a2a\\u8f74\\u8868\\u793a\\u6570\\u636e\\u7c7b\\u522b','\\u7eb5\\u8f74\\u8868\\u793a\\u6570\\u503c\\u7684\\u503c','\\u8fd9\\u4e2a\\u6587\\u672c\\u5757\\u53ef\\u4ee5\\u653e\\u5728\\u56fe\\u4e2d\\u5404','\\u79cd\\u4f4d\\u7f6e'].join('\\n'),\n",
       "                        \"x\": 0,\n",
       "                        \"y\": 0,\n",
       "                        \"font\": \"14px Microsoft YaHei\",\n",
       "                        \"textAlign\": \"left\",\n",
       "                        \"fill\": \"#333\",\n",
       "                        \"line_width\": 0\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"$action\": \"merge\",\n",
       "            \"rotation\": 0,\n",
       "            \"left\": \"50%\",\n",
       "            \"top\": \"15%\",\n",
       "            \"bounding\": \"all\",\n",
       "            \"z\": 0,\n",
       "            \"zlevel\": 0,\n",
       "            \"silent\": false,\n",
       "            \"invisible\": false,\n",
       "            \"ignore\": false,\n",
       "            \"cursor\": \"pointer\",\n",
       "            \"draggable\": false,\n",
       "            \"progressive\": false,\n",
       "            \"width\": 0,\n",
       "            \"height\": 0\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_f94407a68c754620af3a4e3f3fc21126.setOption(option_f94407a68c754620af3a4e3f3fc21126);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f14000b0320>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from pyecharts.commons.utils import JsCode\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "c = (\n",
    "    Bar()\n",
    "    .add_xaxis(Faker.choose())\n",
    "    .add_yaxis(\"商家A\", Faker.values())\n",
    "    .add_yaxis(\"商家B\", Faker.values())\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(title=\"Bar-Graphic Rect+Text 2 组件示例\"),\n",
    "        graphic_opts=[\n",
    "            opts.GraphicGroup(\n",
    "                graphic_item=opts.GraphicItem(left=\"50%\", top=\"15%\"),\n",
    "                children=[\n",
    "                    opts.GraphicRect(\n",
    "                        graphic_item=opts.GraphicItem(\n",
    "                            z=100, left=\"center\", top=\"middle\"\n",
    "                        ),\n",
    "                        graphic_shape_opts=opts.GraphicShapeOpts(width=190, height=90),\n",
    "                        graphic_basicstyle_opts=opts.GraphicBasicStyleOpts(\n",
    "                            fill=\"#fff\",\n",
    "                            stroke=\"#555\",\n",
    "                            line_width=2,\n",
    "                            shadow_blur=8,\n",
    "                            shadow_offset_x=3,\n",
    "                            shadow_offset_y=3,\n",
    "                            shadow_color=\"rgba(0,0,0,0.3)\",\n",
    "                        ),\n",
    "                    ),\n",
    "                    opts.GraphicText(\n",
    "                        graphic_item=opts.GraphicItem(\n",
    "                            left=\"center\", top=\"middle\", z=100\n",
    "                        ),\n",
    "                        graphic_textstyle_opts=opts.GraphicTextStyleOpts(\n",
    "                            text=JsCode(\n",
    "                                \"['横轴表示数据类别',\"\n",
    "                                \"'纵轴表示数值的值',\"\n",
    "                                \"'这个文本块可以放在图中各',\"\n",
    "                                \"'种位置'].join('\\\\n')\"\n",
    "                            ),\n",
    "                            font=\"14px Microsoft YaHei\",\n",
    "                            graphic_basicstyle_opts=opts.GraphicBasicStyleOpts(\n",
    "                                fill=\"#333\"\n",
    "                            ),\n",
    "                        ),\n",
    "                    ),\n",
    "                ],\n",
    "            )\n",
    "        ],\n",
    "    )\n",
    "    #.render(\"graphic_rect_bar1.html\")\n",
    ")\n",
    "c.load_javascript()\n",
    "c.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
